<template>
  <div class="currency">
    <!-- 结构 左 -->
    <div class="left">
      <el-col>
        <h4 class="tab">凡尘管理系统</h4>
        <menu-list :menuList="_menuList"></menu-list>
      </el-col>
    </div>
    <!-- 结构 右 -->
    <div class="right">
      <!-- . 上 -->
      <div class="top">
        <h5>{{ time }}</h5>
        <h5>{{ userInfo.name }}</h5>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
const MenuList = {
  props: {
    menuList: {
      type: Array,
      default: () => [],
    },
  },
  render(_c) {
    const _nodes = this.loopMenu(_c, this.menuList);
    return _c(
      "el-menu",
      {
        props: {
          "text-color": "#fff",
          "unique-opened": true,
          "background-color": "#00152A",
        },
      },
      _nodes
    );
  },
  methods: {
    menuEvt(it) {
      this.$router.push(it.path);
    },
    loopMenu(_c, _list) {
      return _list.map((_it) => {
        let _node;
        if (_it.children && _it.children.length > 0) {
          _node = _c(
            "el-submenu",
            {
              props: {
                index: _it.id,
              },
            },
            [
              // 表头
              _c(
                "template",
                {
                  slot: "title",
                },
                [_c("i", { class: [] }), _c("span", {}, [_it.name])]
              ),
              ...this.loopMenu(_c, _it.children),
            ]
          );
        } else {
          _node = _c(
            "el-menu-item",
            {
              on: {
                click: this.menuEvt.bind(this, _it),
              },
            },
            [_it.name]
          );
        }

        return _node;
      });
    },
  },
};
export default {
  components: { MenuList },
  props: {
    menuList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      _menuList: [],
      userInfo: [],
      time: "",
    };
  },
  created() {
    this._menuList = this.loop(this.menuList);
    this.userInfo = this.$store.getters["common/userInfo"];
    this.time = `${new Date().getFullYear()}年${
      new Date().getMonth() + 1
    }月${new Date().getDate()} 日`
  },
  methods: {
    loop(_list, _id) {
      return _list
        .filter((_it) => {
          if (_id === undefined) {
            if (_it.parent_id === null || _it.parent_id === "") return _it;
          } else {
            if (_it.parent_id === _id) return _it;
          }
        })
        .map((_item) => {
          if (_list.findIndex((_it) => _it.parent_id === _item.id) > -1) {
            _item.children = this.loop(_list, _item.id);
          } else {
            _item.children = [];
          }
          return _item;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.currency {
  width: 100%;
  height: 100%;
  // 结构左
  .left {
    width: 240px;
    height: 100%;
    background-color: #00152a;
    border-right: 1px solid #00152a;
    float: left;

    .el-menu {
      widows: 240px;
      border-right: #00152a 1px solid;
    }
    .tab {
      text-align: center;
      color: #fff;
    }
  }
  // 结构右
  .right {
    width: calc(100% - 240px);
    height: 100%;
    float: right;
    //  . 上
    > .top {
      width: 100%;
      height: 48px;
      background-color: #00152a;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: flex-end;
      padding: 0 30px;
      > h5 {
        color: #fff;
        margin: 14px;
      }
    }
  }
}
</style>
